<template>
  <div>
    <el-dialog
      :title="this.$t('common.modify')"
      :visible.sync="Visible"
      width="1000px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div style="border-bottom:0;" class="midContant clearfix">
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ActiveConfigurationLang.name')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="name"
            @blur="handleBlur('name',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ActiveConfigurationLang.times')}}:</span
        >
        <span class="Span borderB contant">
          <el-date-picker
            ref="timeData"
            class="Required" 
            v-model="timeData"
            @blur="Blur('timeData')"
            @focus="Focus('timeData')"
            @change="timeChange"
            type="daterange"
            value-format="timestamp"
            :range-separator="$t('common.range_separator')"
            :start-placeholder="$t('common.start_placeholder')"
            :end-placeholder="$t('common.end_placeholder')">
          </el-date-picker>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ActiveConfigurationLang.lines')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-select
            ref="lids"
            class="Required" 
            multiple
            collapse-tags
            filterable
            @blur="handleBlur('lids', $event)"
            @change="handleChang('lids')"
            v-model="data.lids"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_lids"
              :key="item.lid"
              :label="item.name_current"
              :value="item.lid"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ActiveConfigurationLang.Activity_mode')}}:</span
        >
        <span class="Span borderB contant">
          <el-select
            ref="modeOfActivity"
            class="Required"
            filterable
            @blur="handleBlur('modeOfActivity', $event)"
            @change="handleChang('modeOfActivity')"
            v-model="data.modeOfActivity"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_modeOf"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ActiveConfigurationLang.Discount_methods')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-select
            ref="preferentialMethods"
            disabled
            filterable
            @blur="handleBlur('preferentialMethods', $event)"
            @change="handleChang('preferentialMethods')"
            v-model="data.preferentialMethods"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_preferential"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ActiveConfigurationLang.Discount_amount')}}:</span
        >
        <span class="Span borderB contant">
          <el-input-number
            controls-position="right"
            class="Required"
            size="small" 
            ref="preferentialValue" 
            @blur="handleBlur('preferentialValue', $event)" 
            @focus="handleFocus($event)" 
            :min="0"  
            :precision="2"
            v-model="data.preferentialValue">
          </el-input-number>
        </span>
        <span style="text-align: right" class="Span borderB borderR"
          >{{$t('ActiveConfigurationLang.Activity_Introduction')}}:</span
        >
        <span style="width:80%" class="Span borderB contant">
          <el-input v-model="data.descriptionOfTheEvent"></el-input
        >
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
  },
  data() {
    return {
      Visible: false,
      data: {},
      timeData:[],
      options_lids:[],
      options_modeOf:[],
      options_preferential:[],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {},
  watch: {
  },
  methods: {
    init(data) {
      this.getOptions()
      this.Visible = true;
      this.id = data.id;
      this.getData()
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineAllList").then((res) => {
        this.options_lids = res.data;
      });
      this.$get("getModeOfActivity").then((res) => {
        this.options_modeOf = res.data;
      });
      this.$get("getPreferentialMethods").then((res) => {
        this.options_preferential = res.data;
      });
    },
    //获取单条
    getData() {
      this.$get("activitiesInfo", { id: this.id }).then(
        (res) => {
          this.data = res.data;
          this.timeData=[this.data.startTime*1000,this.data.endTime*1000]
        }
      );
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if (!this.data.name) {
        this.$refs.name.$el.childNodes[1].style.border = "1px solid red";
        type = false;
      }
      if(!this.data.startTime||!this.data.endTime){
        this.$refs.timeData.$el.style.borderColor='red'
      }
      if (!this.data.lids&&this.data.lids!==0) {
        this.$refs.lids.$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
        type = false;
      }
      if (!this.data.modeOfActivity&&this.data.modeOfActivity!==0) {
        this.$refs.modeOfActivity.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if (!this.data.preferentialMethods&&this.data.preferentialMethods!==0) {
        this.$refs.preferentialMethods.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(!this.data.preferentialValue){
        this.$refs.preferentialValue.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("id", this.id);
        params.append("name", this.data.name);
        params.append("startTime", this.data.startTime);
        params.append("endTime", this.data.endTime);
        params.append("lids", this.data.lids);
        params.append("modeOfActivity", this.data.modeOfActivity);
        params.append("preferentialMethods", this.data.preferentialMethods);
        params.append("preferentialValue", this.data.preferentialValue);
        params.append("descriptionOfTheEvent", this.data.descriptionOfTheEvent);
        this.$postForm("editActivities", params).then((res) => {
          this.confirmTrue = true;
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success",this.levelType);
            this.cancel()
          }
        });
      }
    },
    //取消
    cancel() {
      this.data = {};
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
        dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    // 判断了时间组件内容是否有东西
    Focus(name) {
      let dom = this.$refs[name].$el
      dom.style.borderColor = "#EBEEF3";
      
    },
    Blur(name) {
      let dom = this.$refs[name].$el
      if (this[name].length==0) {
        dom.style.borderColor = "red";
      }
    },
    timeChange() {
        if (!!this.timeData&&this.timeData.length > 0) {
            this.data.startTime = this.timeData[0] / 1000;
            this.data.endTime = this.timeData[1] / 1000;
        }else{
            this.data.startTime = '';
            this.data.endTime = '';
        }
    },
  },
};
</script>

<style scoped lang="less" >

.foot {
  /deep/.el-input--mini {
    width: 60% !important;
  }
}
.Span{
  width: 20%;
}
.contant{
  width: 30%;
}
/deep/.el-date-editor .el-range__close-icon{
  line-height: 24px;
}

</style>